<template>
    <a-modal :title="$t('Create') + $t('Pool')" v-model='createpool' @cancel='cancelhandle' width='40%' @ok='subnew'
        :cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
        <a-spin size="large"
            style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%"
            tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
        <a-form :form='form'>
            <a-form-item :label="$t('Pool') + $t('Name')" v-bind="formlayout" has-feedback>
                <a-input v-decorator="[
                    'pool',
                    { rules: [{ required: true, message: $t('Enter') + $t('Pool') + $t('Name') }, { pattern: namePattern, message: $t('Not_enter_special_characters') }] }
                ]" :placeholder="$t('Enter') + $t('Pool') + $t('Name')" />
            </a-form-item>
            <a-form-item :label="$t('Pool') + $t('Type')" v-bind='formlayout' has-feedback>
                <a-select @change="changeType" v-decorator="['pool_type',
                    {
                        rules: [{
                            required: true, message: $t('Choose') + $t('Pool') + $t('Type')
                        }]
                    }]" :placeholder="$t('Choose') + $t('Pool') + $t('Type')">
                    <a-select-option v-for='t in typedata' :key='t.val'>{{ t.label }}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item :label="$t('Data-slice') + $t('Amount')" v-bind='formlayout' has-feedback>
                <!-- <a-input-number v-decorator="['pg_num',{
                    rules:[{required:true,message:$t('Enter')+$t('Data-slice')+$t('Amount')}]
                }]" :placeholder="$t('Enter')+$t('Data-slice')+$t('Amount')" :min='1' style="width:100%">
                </a-input-number> -->
                <a-input v-decorator="['pg_num', {
                    rules: [
                        { required: true, message: $t('Enter') + $t('Data-slice') + $t('Amount') },
                        { pattern: /^([1-9]|[1-9]\d{1,9})$/, message: $t('Quota_rule_prompt') }
                    ]
                }]" :placeholder="$t('Enter') + $t('Data-slice') + $t('Amount')" style="width:100%">
                </a-input>
            </a-form-item>
            <a-form-item :label="'CRUSH ' + $t('Rule')" v-bind='formlayout' has-feedback
                v-if='form.getFieldValue("pool_type") == "replicated"'>
                <a-row>
                    <a-col :span='20'>
                        <a-select v-decorator="['rule_name', {
                            rules: [{ required: true, message: $t('Choose') + 'CRUSH ' + $t('Rule') }]
                        }]" @change="crushRuleChange">
                            <a-select-option v-for="(i, index) in $store.state.basedata.crush_rules_replicated"
                                :value='i.rule_name' :key="index">
                                {{ i.rule_name }}
                            </a-select-option>
                        </a-select>
                    </a-col>
                    <a-col :span='4'>
                        <a-button icon='question-circle' @click="checkmore"></a-button>
                    </a-col>
                </a-row>
                <div v-if="more == true">
                    <ul class="detail" v-for="(i, index) in currentCrushData" :key="index">
                        <li><span>CRUSH {{ $t('Rule') }} ID：</span>{{ i.rule_id }}</li>
                        <li><span>CRUSH {{ $t('Rule') }}{{ $t('Name') }}：</span>{{ i.rule_name }}</li>
                        <li><span>{{ $t('Min-data') }}：</span>{{ i.min_size }}</li>
                        <li><span>{{ $t('Max-data') }}：</span>{{ i.max_size }}</li>
                        <li><span>{{ $t('Param') }}：</span><br />
                            {{ i.steps }}
                        </li>
                    </ul>
                </div>
            </a-form-item>
            <a-form-item :label="'CRUSH ' + $t('Rule')" v-bind='formlayout' has-feedback
                v-if='form.getFieldValue("pool_type") == "erasure"'>
                <a-row>
                    <a-col :span='20'>
                        <a-select v-decorator="['rule_name', {
                            rules: [{ required: true, message: $t('Choose') + 'CRUSH ' + $t('Rule') }]
                        }]" @change="crushRuleChange">
                            <!-- <a-select-option v-for="(i, index) in $store.state.basedata.ec_profile" :value='i.name':key="index">
                                {{ i.name }}
                            </a-select-option> -->
                            <a-select-option v-for="(i,index) in $store.state.basedata.crush_rules_erasure" :value='i.rule_name' :key="index">
                            {{i.rule_name}}
                        </a-select-option>
                        </a-select>
                    </a-col>
                    <a-col :span='4'>
                        <a-button icon='question-circle' @click="checkmore"></a-button>
                    </a-col><br />
                </a-row>
                <div v-if="more == true">
                    <ul class="detail" v-for="(i, index) in currentCrushData" :key="index">
                        <li><span>CRUSH {{ $t('Rule') }} ID：</span>{{ i.rule_id }}</li>
                        <li><span>CRUSH {{ $t('Rule') }}{{ $t('Name') }}：</span>{{ i.rule_name }}</li>
                        <li><span>{{ $t('Min-data') }}：</span>{{ i.min_size }}</li>
                        <li><span>{{ $t('Max-data') }}：</span>{{ i.max_size }}</li>
                        <li><span>{{ $t('Param') }}：</span><br />
                            {{ i.steps }}
                        </li>
                    </ul>
                </div>
            </a-form-item>
            <a-form-item :label="$t('Erasure-config')" v-bind='formlayout' has-feedback
                v-if='form.getFieldValue("pool_type") == "erasure"'>
                <a-row>
                    <a-col :span='24'>
                        <a-select v-decorator="['erasure_code_profile', {
                            rules: [{ required: true, message: $t('Choose') + $t('Erasure-config') }]
                        }]">
                            <a-select-option v-for="(i, index) in $store.state.basedata.ec_profile" :value='i.name'
                                :key="index">
                                {{ i.name }}
                            </a-select-option>
                        </a-select>
                    </a-col>
                    <!-- <a-col :span='4'>
                    	<a-button icon='question-circle'></a-button>
                    </a-col> -->
                </a-row>
            </a-form-item>
            <a-form-item :label="$t('Duplicate') + $t('Amount')" v-bind="formlayout" has-feedback
                v-if='form.getFieldValue("pool_type") == "replicated"'>
                <a-input-number v-decorator="['size', {
                    rules: [{ required: true, message: $t('Enter') + $t('Duplicate') + $t('Amount') }]
                }]" :min='1'>
                </a-input-number>
            </a-form-item>
            <!-- <a-form-item :label="$t('Mark')" v-bind='formlayout' has-feedback v-if='form.getFieldValue("pool_type")  == "erasure"'>
                <a-checkbox v-decorator="['flags']">
                    {{$t('Full-support')}}（{{$t('Block')}}，{{$t('File-system')}}，{{$t('Object-storage')}}）
                </a-checkbox>
            </a-form-item> -->
            <a-form-item :label="$t('App-Type')" v-bind='formlayout'>
                <a-checkbox-group v-decorator="['applications', {
                    rules: [{ required: true, message: $t('Choose') + $t('App-Type') }]
                }]" :checked="checked" @change="onChange">
                    <a-row>
                        <a-col :span='8' v-show="poolType != 'erasure'">
                            <a-checkbox value='cephfs'>
                                {{ $t('File-system') }}
                            </a-checkbox>
                        </a-col>
                        <a-col :span='8' v-show="poolType != 'erasure'">
                            <a-checkbox value='rbd'>
                                {{ $t('Block') }}
                            </a-checkbox>
                        </a-col>
                        <a-col :span='8'>
                            <a-checkbox value='rgw'>
                                {{ $t('Object-storage') }}
                            </a-checkbox>
                        </a-col>
                    </a-row>
                </a-checkbox-group>
            </a-form-item>
            <!-- <hr/>
            <p>数据压缩</p>
            <a-form-item label='模式' v-bind="formlayout" has-feedback>
                <a-select v-decorator="['poolmodel',{
                    initialValue:'none',
                    rules:[{required:true,message:'请选择模式'}]
                }]">
                    <a-select-option v-for='m in modeldata' :key='m.val'>{{m.label}}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label='压缩算法' v-bind='formlayout' has-feedback v-if='form.getFieldValue("poolmodel") == "2" || form.getFieldValue("poolmodel") == "3" || form.getFieldValue("poolmodel") == "4" || form.getFieldValue("poolmodel") == "5"'>
                <a-select v-decorator="['compression',{
                    rules:[{required:true,message:'请选择算法'}]
                }]">
                    <a-select-option v-for='c in compdata' :key='c.val'>{{c.label}}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label='最小压缩对象' v-bind='formlayout'  v-if='form.getFieldValue("poolmodel") == "2" || form.getFieldValue("poolmodel") == "3" || form.getFieldValue("poolmodel") == "4" || form.getFieldValue("poolmodel") == "5"' >
                <a-row>
                    <a-col :span='12'>
                        <a-input-number v-decorator="['min',{
                            rules:[{required:true,message:'请输入最小压缩对象'}]
                        }]" placeholder='例如：128'>
                        </a-input-number>
                    </a-col>
                    <a-col :span='12'>
                        <a-select defaultValue="KiB">
                            <a-select-option v-for='u in unitdata' :key='u.val'>{{u.label}}</a-select-option>
                        </a-select>
                    </a-col>
                </a-row>
            </a-form-item>
            <a-form-item label='最大压缩对象' v-bind='formlayout'  v-if='form.getFieldValue("poolmodel") == "2" || form.getFieldValue("poolmodel") == "3" || form.getFieldValue("poolmodel") == "4" || form.getFieldValue("poolmodel") == "5"' >
                <a-row>
                    <a-col :span='12'>
                        <a-input-number v-decorator="['max',{
                            rules:[{required:true,message:'请输入最大压缩对象'}]
                        }]" placeholder='例如：512'>
                        </a-input-number>
                    </a-col>
                    <a-col :span='12'>
                        <a-select defaultValue="KiB">
                           <a-select-option v-for='u in unitdata' :key='u.val'>{{u.label}}</a-select-option>
                        </a-select>
                    </a-col>
                </a-row>
            </a-form-item>
            <a-form-item label='压缩比率' v-bind='formlayout' has-feedback  v-if='form.getFieldValue("poolmodel") == "2" || form.getFieldValue("poolmodel") == "3" || form.getFieldValue("poolmodel") == "4" || form.getFieldValue("poolmodel") == "5"'>
                <a-input-number v-decorator="['rate',{
                    rules:[{required:true,message:'请输入压缩比率'}]
                }]">
                </a-input-number>
            </a-form-item> -->
        </a-form>
    </a-modal>
</template>
<script>
import request from '@/request/request'

export default {
    name: 'cpool',
    props: ['pool'],
    data() {
        return {
            form: this.$form.createForm(this),
            formlayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 14 }
            },
            createpool: false,
            typedata: [],
            modeldata: [{ val: '1', label: 'node' }, { val: '2', label: 'passive' }, { val: '3', label: 'aggressive' }, { val: '4', label: 'force' }, { val: '5', label: 'unset' }],
            compdata: [{ val: 'snappy', label: 'snappy' }, { val: 'zlib', label: 'zlib' }, { val: 'zstd', label: 'zstd' }, { val: 'lz4', label: 'lz4' }],
            unitdata: [{ val: 'KiB', label: 'KiB' }, { val: 'MiB', label: 'MiB' }, { val: 'GiB', label: 'GiB' }, { val: 'TiB', label: 'TiB' }],
            ptype: '',
            checked: false,
            more: false,
            spinning: false,
            currentCrushData: [],
            currentCrushData_copy: [],
            poolType: '',
        }
    },
    watch: {
        pool(val) {
            this.createpool = val;
            this.typedata = [{ val: 'replicated', label: this.$t('Duplicate') }, { val: 'erasure', label: this.$t('Erasure') }]
        },
    },
    methods: {
        cancelhandle(e) {
            this.form.resetFields()
            this.spinning = false
            // this.createpool=false
            //表单内容的数据初始化
            this.currentCrushData = [];
            this.more = false;
            this.$emit('pmodal', false, true)
        },
        onChange(checkedValues) {
        },
        subnew(e) {
            e.preventDefault();
            this.form.validateFields((err, value) => {
                let params = {
                    pool_name: value.pool,
                    pg_num: value.pg_num,
                    pool_type: value.pool_type,
                    rule_name: value.rule_name,
                    size: value.size,
                    erasure_code_profile: 'default',
                    applications: value.applications
                }
                if (value.pool_type == 'replicated') {
                    params.erasure_code_profile = undefined;
                } else {
                    params.erasure_code_profile = value.erasure_code_profile;
                }
                if (!err) {
                    this.spinning = true
                    // pool_name: value.pool 存储池名,
                    // pg_num: value.pg_num 数据切片数量,
                    // pool_type: value.pool_type 存储池类型,
                    // rule_name: value.rule_name Crush规则,replicated_rule  erasure-code
                    // size: value.size 副本数量,
                    // erasure_code_profile: value.erasure_code_profile 纠删码配置,default
                    // applications: value.applications 应用类型
                    request('put', 'pool/', params).then(res => {
                        // console.log('创建池',res)
                        this.model(res.data.id) //返回模板
                        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                        // this.gettask()  //任务栏信息
                        // this.createpool=false
                        this.spinning = false
                        // this.form.resetFields()  //重置弹窗
                        // this.$emit('pmodal',false, false) //关闭弹窗
                    }).catch(err => {
                        // this.spinning = false;
                        // this.form.resetFields();  
                        // this.$emit('pmodal',false, false); //关闭弹窗
                    }).finally(() => {
                        this.spinning = false;
                        this.form.resetFields()  //重置弹窗
                        this.$emit('pmodal', false, false) //关闭弹窗
                    })
                }
            })
        },
        checkmore() {
            this.more = !this.more
        },
        // 存储池类型, 重置CRUSH 规则表单值
        changeType(value) {
            this.poolType = value;
            this.form.setFieldsValue({
                rule_name: '',
            });
            this.more = false;
            this.currentCrushData_copy = [];
            //获取对应存储池类型规则(副本/纠删码)的数组数据
            for (let key in this.$store.state.basedata) {
                if (key.indexOf(value) != -1) {
                    this.currentCrushData_copy = this.$store.state.basedata[key];
                }
            }
        },
        //crush规则改变，显示对应的规则详情
        crushRuleChange(value) {
            this.currentCrushData = [];
            this.currentCrushData = this.currentCrushData_copy.filter(item => {
                return item.rule_name == value;
            })
        }
    },
    mounted() {
        this.checked = false
    },
}
</script>
<style scoped>
.disappear {
    display: none !important;
}

.detail {
    /*background-color: #f1f8ff;*/
    list-style: none;
    margin: 0;
    padding: 0;
    transform: 0.2s;
}

.detail li {
    background-color: #f1f8ff;
    line-height: 2em;
}

.detail li span {
    background-color: #e6f4ff;
    display: inline-block;
    height: 100%;
    width: 11em;
    padding-left: 1em;
    margin-right: 1em;
}

.ant-checkbox-group {
    width: 100%;
    line-height: 3em
}

/* ant-form-item-control */
</style>
